<template>
<div class="wp">
    <Topnav/>
    <Topsearch/>
    <div class="phone">
        <ul class="phoneleft">
            <li class="phone1">个人中心</li>
            <li v-for="(item,index) in sild.title" class="phone2" :key="index" @click="toshow(index)" :class="{'active':show[index]}">
                {{item}}
                <span class="phone3">></span>
                <ul v-if="show[index]">
                    <li v-for="(it,i) in sild.content[index]" class="phone4"  :key="i" @click.stop="tosome(index,i)" :class="{'pactive':toflage[index][i]}" >
                        <span > {{it}}</span>
                    </li>
                </ul>
            </li>
        </ul>
        <div class="phoneright">
            <Binding  v-if="flag"/>
            <Account v-if="toflage[0][0]"/>
            <Order v-if="toflage[0][1]"/>
            <Data v-if="toflage[1][0]"/>
            <Address v-if="toflage[1][1]" />
            <Recent v-if="toflage[1][3]" />
        </div>
    </div>
    <Foot/>
</div>
</template>

<script>
import Foot from '../Foot';
import Topnav from '../Topnav';
import Topsearch from '../Topsearch';
import Binding from '../yjl/Binding';
import Account from '../yjl/Account ';
import Recent from '../yjl/Recent';
import Address from './Address';
import Data from './Data';
import Order from './Order';

export default {
    name:'Ypersonal',
    data(){
        return{
            sild:{
                title:['交易管理','会员资料','站内信'],
                content:[
                    ['我的账户','我的订单','我的积分','积分订单','我的钱包'],
                    ['个人资料','地址管理','我的收藏','最近浏览','修改密码'],
                    ['我的消息','意见反馈']
                ]
            },//侧边栏
            toflage:[],//第一层点击
            show:[],//第二次点击
            flag:true,
        }
    },
    components:{
        Foot,
        Topnav,
        Topsearch,
        Binding,
        Account,
        Recent,
        Address,
        Data,
        Order,
    },
    methods:{
        tosome(index,v){
            for (let i = 0; i < this.sild.title.length; i++) {
            this.$set(this.toflage,i,[]);
            for (let j = 0; j < this.sild.content[i].length; j++) {
                this.$set(this.toflage[i],j,false);
            }
        }
            this.$set(this.toflage[index],v,true);
            this.flag = false;
        },
        toshow(v){
            this.$set(this.show,v,!this.show[v]);
        },
    },
    created(){
        for (let i = 0; i < this.sild.title.length; i++) {
            this.$set(this.toflage,i,[]);
            for (let j = 0; j < this.sild.content[i].length; j++) {
                this.$set(this.toflage[i],j,false);
            }
        };
        for(var j=0;j<this.sild.content.length;j++){
            this.$set(this.show,j,false);
        };
    },
}
</script>

<style scoped>
.wp {
    width: 100%;
}
.phone {
    width: 1280px;
    margin: 30px auto 42px;
    display: flex;
    justify-content: space-between;
}
.phoneleft {
    width: 148px;
    line-height: 57px;
    text-align: left;
    border: 1px solid #e7e7e7;
    color: #666666;
    font-size: 18px;
}
.phone1 {
    padding-left: 20px;
    border-bottom: 1px solid #e7e7e7;
}
.phone2 {
    padding-left: 20px;
    font-size: 16px;
    line-height: 47px;
    color: #999999;
    position: relative;
    cursor: pointer;
}
.phone3 {
    position: absolute;
    left: 110px;
}
.phone4 {
    font-size: 14px;
    color: #999999;
}
.pactive {
    text-decoration: underline;
    color: #498e3d;
}
.active {
    color: #666;
}
/* 右侧 */
.phoneright {
    width: 1083px;
    height: 623px;
    border: 1px solid #e7e7e7;
}
</style>